<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  <!--1.在c前面插入一个F
     splice(2,0,F)
     第一个参数：开始的索引位置，包括开始索引
     第二个参数：要删除的数量
     第三个参数及以后：可以传递一些新的元素，这些元素将会自动插入到要删除的开始位置索引前边-->
  <ul>
    <!--
       1.官方推荐我们在使用v-for时，给对应的元素或组件添加一个 :key 属性
       2.如果我们希望在C前面插入一个F，diff算法默认执行起来是这样的：
         把C更新为F，D更新为C，E更新为D，最后再插入E，很没有效率
       3.使用key给每个节点做一个唯一的标识，这样diff算法就可以正确识别此节点，找到正确位置插入新节点，直接在C前面插入F
    -->
    <li v-for="letter in letters" :key="letter">{{letter}}</li>
  </ul>
</div>

<script src="../js/vue.js"></script>
<script>
  const app=new Vue({
    el: '#app',
    data: {
      letters:['A','B','C','D','E',]
    },
  })

</script>
</body>
</html>